import React, { Component } from 'react';
import { Card  ,Button  } from 'antd';
import { connect } from 'dva';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Popconfirm, message } from 'antd';
import router from 'umi/router';

import styles from './index.less';
const namespace = 'listimages';
const ButtonGroup = Button.Group;
function confirm1(e,id,name) {
  console.log(id);
  const payload = {"name":name,"id":id};
  console.log(payload);
  message.success('Click on Yes');
}

const confirm_example = (e,id,name,dispatch) => {
    const payload = {"name":name,"id":id};
    console.log(payload);
 // message.success('Click on Yes');
    //onDidMount: () => {
    this.props.dispatch({
        type: 'deleteimage/deleteImage',
        payload: {'ddd':"ddddd"},
      });
    //}
/*  return {
    onDidMount: () => {
      dispatch({
        type: `${namespace}/listImage`,
        payload: {'ddd':"ddddd"},
      });
    },
  };*/
};
function cancel(e) {
  console.log(e);
  message.error('Click on No');
}

const mapStateToProps = (state) => {
  const cardList = state[namespace].data;
  return {
    cardList,
  };
};
const mapStateGetToProps = (state) => {
  const cardList = state[namespace].updatedata;
  return {
    cardList,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    onDidMount: () => {
      dispatch({
        type: `${namespace}/listImage`,
        payload: {'ddd':"ddddd"},
      });
    },
  };
};

@connect(mapStateToProps, mapDispatchToProps)
class GetDetail extends Component {
  componentDidMount() {
    this.props.onDidMount();
  };
  confirm = (e,id,name,dispatch) => {
    const payload = {"name":name,"id":id};
    console.log(payload);
 // message.success('Click on Yes');
    //onDidMount: () => {
      this.props.dispatch({
        type: 'listimages/deleteImage',
        payload: payload,
      }).then(result => {
        //state[namespace].data.pop();
        router.push({
          pathname: '/dashboard/analysis'
        })
      });

    };
  update = (e,id,name,description,url,dispatch) => {
    const payload = {"name":name,"id":id,"description":description,"url":url};
    console.log("the update data is ",payload);
 // message.success('Click on Yes');
    //onDidMount: () => {
      this.props.dispatch({
        type: 'showdetails/getdetails',
        payload: payload.id,
      }).then(result => {
        //state[namespace].data.pop();
        router.push({
          pathname: '/modify'
        })
      });

    };
  handleSubmit = (e, values,err) => {
    //const { type } = this.state;
    //const {values} = "nginx";
      e.preventDefault();

      const { dispatch } = this.props;
      console.log(values);
      dispatch({
        type: 'showdetails/getdetails',
        payload: values,
      }).then(result => {
           console.log('Tags result', result);  
            router.push({
                pathname: '/showdetails',

            });
         });
   
  };
  render() {
    console.log("trans the get data ",this.props.cardList);
    return (
          <PageHeaderWrapper content="view" className={styles.main}>

      <div>
        {
          this.props.cardList.map(card => {
            return (
              <Card key={card.id}>
              <div  style={{display:"inline-block",width:1000}}>
                <div><strong><h1>Name: {card.name}</h1></strong></div>
                <div><h4>Url: {card.url}</h4>
              </div>
              </div>
          <div style={{display:"inline-block"}}> 
              <ButtonGroup>
		          <Button type="primary" key="console" onClick={(e)=>(this.handleSubmit(e,card.id))}       style={{
		        textAlign: 'center',
		        right: 0,
		      	}} values = "key">
		        view
		     	 </Button>
          <Button type="primary" key="update" onClick={(e)=>(this.update(e,card.id,card.name,card.description,card.url))}       style={{
            textAlign: 'center',
            left: 20,
            }} values = "key1">
            update
           </Button>
             <Popconfirm
    title="Are you sure delete this image?"
    onConfirm={(e)=>this.confirm(e,card.id,card.name)}
    onCancel={cancel}
    okText="Yes"
    cancelText="No"
  >
		     	 <Button type="primary" style={{
		        textAlign: 'center',
		        left: 40,
		      	}}>delt1e</Button>


            </Popconfirm>
		     	</ButtonGroup>  
          </div> 

    
              </Card>
            );
          })
        }
      </div>
            </PageHeaderWrapper>

    );
  }
}
export default connect()(GetDetail);